// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

$icon-size-sm: 24px;
$icon-size-md: 32px;

.c-menu-item {
    padding: $spacing-md 0;
    border-bottom: 1px solid $color-marketing-gray-20;

    .c-menu-item-link {
        display: block;

        &:link,
        &:visited {
            color: $color-black;
            text-decoration: none;

            .c-menu-item-title {
                border-bottom: 2px solid transparent;
            }
        }

        &:hover,
        &:active,
        &:focus {
            .c-menu-item-title {
                @include transition(border-bottom-color 100ms ease-in-out);
                border-bottom: 2px solid $color-black;
                color: $color-black;
            }
        }
    }

    .c-menu-item-head {
        display: block;

        .c-menu-item-title {
            border-bottom: 2px solid transparent;
        }
    }

    .c-menu-item-head,
    .c-menu-item-link {
        @include bidi(((padding-left, $icon-size-sm + $spacing-md, padding-right, 0),));
        position: relative;
        word-break: break-word;

        .c-menu-item-icon {
            @include bidi(((left, 0, right, auto),));
            height: $icon-size-sm;
            margin: 0;
            position: absolute;
            top: 0;
            width: $icon-size-sm;
        }
    }

    .c-menu-item-title {
        @include text-body-sm;
        line-height: 1.1;
        display: inline;
    }

    .c-menu-item-desc {
        display: none;
    }

    @media #{$mq-sm} {
        border-radius: $border-radius-sm;
        border: 0;
        height: 100%;
        padding: 0;
        width: auto;

        &:hover,
        &:focus,
        &:active {
            @include transition(background-color 100ms ease-in-out);
            background-color: $color-marketing-gray-10;
        }

        .c-menu-item-head,
        .c-menu-item-link {
            @include border-box;
            height: 100%;
            padding: $spacing-sm;
        }

        .c-menu-item-desc {
            @include text-body-xs;
            display: block;
            margin: $spacing-xs 0 0;
        }

        &.mzp-has-icon {
            .c-menu-item-head,
            .c-menu-item-link {
                @include bidi(((padding-left, $spacing-sm + $icon-size-sm + $spacing-md, padding-right, 0),));
                position: relative;

                .c-menu-item-icon {
                    @include bidi(((left, $spacing-sm, right, auto),));
                    height: $icon-size-sm;
                    margin: 0;
                    position: absolute;
                    top: $spacing-sm;
                    width: $icon-size-sm;
                }
            }
        }
    }

    @media #{$mq-md} {
        width: 260px;

        .c-menu-item-title {
            @include text-body-md;
        }

        // Hide descriptions to shorten the dropdown
        .c-menu-item-desc {
            display: none;
        }
    }

    @media #{$mq-lg} {
        &.mzp-has-icon {
            .c-menu-item-head,
            .c-menu-item-link {
                padding: $spacing-md;
                @include bidi(((padding-left, $spacing-md + $icon-size-md + $spacing-md, padding-right, 0),));

                .c-menu-item-icon {
                    @include bidi(((left, $spacing-md, right, auto),));
                    height: $icon-size-md;
                    width: $icon-size-md;
                    top: $spacing-md;
                }
            }
        }

        .c-menu-item-desc {
            display: block;
            margin-top: $spacing-sm;
        }
    }
}

// Show descriptions when the window is tall enough for the longer menu
@media #{$mq-md} and (min-height: 800px) {
    .c-menu-item .c-menu-item-desc {
        display: block;
    }
}
